<!--
 * @Description: 
 * @Version: 1.668
 * @Autor: 地虎降天龙
 * @Date: 2024-01-13 11:20:35
 * @LastEditors: 地虎降天龙
 * @LastEditTime: 2024-03-13 20:46:55
-->

<script setup lang="ts">
import * as THREE from 'three'
import { randomLoading as loading } from 'PLS/UIdemo'
import { shallowRef, watchEffect } from 'vue'

import { OrbitControls } from '@tresjs/cientos'
import modelVue from '../components/model.vue'
import floorText from '../components/floorText.vue'
import arrow25D from '../components/arrow2.5D.vue'

const TDirectionalLight = shallowRef()
watchEffect(() => {
	if (TDirectionalLight.value) {
		TDirectionalLight.value.shadow.mapSize.set(2048, 2048)
		TDirectionalLight.value.shadow.camera.near = 0.1
		TDirectionalLight.value.shadow.camera.far = 5000
		TDirectionalLight.value.shadow.camera.top = 500
		TDirectionalLight.value.shadow.camera.right = 500
		TDirectionalLight.value.shadow.camera.left = -500
		TDirectionalLight.value.shadow.camera.bottom = -500
		TDirectionalLight.value.shadow.radius = 2
	}
})

const controlsState = {
	enableDamping: true,
	dampingFactor: 0.05,
	autoRotate: true,
	autoRotateSpeed: 2,
}

const gl = {
    clearColor: '#999',
    outputColorSpace: THREE.SRGBColorSpace,
    toneMapping: THREE.ACESFilmicToneMapping,
    toneMappingExposure: 1.8,
    windowSize: true,
    powerPreference: 'high-performance',
    // antialias: true,
    shadows: true,
    // useLegacyLights: false,
    // physicallyCorrectLights: true,
}
</script>

<template>
	<loading />
	<TresCanvas v-bind="gl">
		<TresPerspectiveCamera :position="[-100, 800, 500]" :fov="50" :near="0.1" :far="10000" />
		<OrbitControls v-bind="controlsState" />
		<TresAmbientLight color="#ffffff" :intensity="2" />
		<TresDirectionalLight ref="TDirectionalLight" color="#ffffff" :position="[260, 260, 350]" :intensity="6"
			cast-shadow />

		<modelVue />

		<floorText />

		<arrow25D :position="[230, 10, 0]" :scale="30" text="长:86m" :textRotation="[-Math.PI / 5, 0, 0]" />

		<arrow25D :position="[0, 10, 230]" :scale="30" text="宽:62m" :rotation="[0, -Math.PI / 2, Math.PI / 5]" :zRoom="3"
			:textRotation="[-Math.PI / 5, Math.PI / 2, Math.PI / 5]" :arrScale="[2, 2, 0.4]" />


		<arrow25D :position="[-230, 96, 0]" :scale="30" text="高:46m" :rotation="[Math.PI / 2, 0, 0]" :zRoom="2"
			:arrScale="[2, 2, 0.4]" :textRotation="[-Math.PI / 1.5, 0, 0]" />

	</TresCanvas>
</template>
